<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="账单明细" navbarType='3'></wlk-navbar>
        <u-sticky bgColor="#fff">
            <view class="content-tabs">
                <u-tabs
                        :activeStyle="{
                        color: themeColor,
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                        :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                        :inactiveStyle="{
                        color: '#646566',
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        transform: 'scale(1)'
                    }"
                        :list="tabs"
                        lineWidth="35"
                        lineHeight="2"
                        :current="current"
                        :lineColor="themeColor"
                        :scrollable="false"
                        @change="changeTab"
                ></u-tabs>
            </view>
        </u-sticky>

        <block v-if="loadStatus=='nomore' && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.search"
                        text="没有搜索结果"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="note-list pd30">
              <view class="note-item wd100 bgw pd30 mb20 br04 wlkflex justify-between" v-for="(item,index) in list" :key="item.id">
                  <view>
                      <view>{{item.remark}}</view>
                      <view class="mt10 col9 desc" v-if="item.infos && item.infos.order_sn">订单号：{{item.infos.order_sn}}</view>
                      <view class="mt10 col9 desc">{{$u.timeFormat(item.createtime,'yyyy-mm-dd hh:MM:ss')}}</view>
                  </view>
                  <view :style="{color:item.money>0?themeColor:'#FF4F00'}">{{item.money>0?'+'+item.money:item.money}}</view>
              </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </view>
        </block>

    </view>
</template>

<script>
    import { mapGetters } from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['themeColor','uEmpty'])
        },
        data() {
            return {
                tabs: [{
                    name: '全部',
                    value:'all'
                }, {
                    name: '收入',
                    value:'income',
                }, {
                    name: '支出',
                    value:'expend'
                }],
                list:[],
                current:0,
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了'

            };
        },
        onLoad(options) {
            _self = this;
        },
        onShow() {
            _self.loadStatus = 'loading';
            _self.page = 1;
            _self.list = [];
            _self.getData();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
        methods: {
            changeTab(item){
                this.current = item.index;
                _self.loadStatus = 'loading';
                _self.page = 1;
                _self.list = [];
                _self.getData();
            },
            async getData() {
                const res = await uni.$u.http.post("wallet/getList", {
                    page: this.page,
                    type: 'money',
                    current:this.tabs[this.current].value
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            }
        },

    };
</script>

<style lang="scss">
    .content-tabs{
        background-color: #FFFFFF;
        padding-top: 20rpx;
        width: 100%;
        border-bottom: 1px solid #F3F3F3;
        height: 49px;
    }
    .note-list{
        .note-item{
            font-size: $font-base;
            .desc{
                font-size: $font-sm;
            }
        }
    }

</style>
